<template>
  <div id="app">
    <!-- <img src="\static\images\index_background.jpg" style="position:relative"> -->
    <!--外部导入的导航栏-->
    <div id="head">
        <div class="nav">
          <div class="dh">
            <ul>
              <li><router-link to="main">主站</router-link></li>
              <li><router-link to="loginRegister">注册&登录</router-link></li>
              <li><a href="#">微信公众号</a></li>
              <li><router-link to="loginRegister">个人中心</router-link></li>
              <!-- <li><a href="#">学习</a></li> -->
              <li><a href="#">推荐</a></li>
              <li><a href="#">热门</a></li>
              <li><a href="#">文章</a></li>
              <li><a href="#">时下流行</a></li>
              <li><a href="#">开发工具</a></li>
              <li><a href="#">加入我们</a></li>
              </ul>
            </div>
        </div>
        <hr>
      <!--导入的组件头部搜索框-->
      <!-- <v-searchBox></v-searchBox> -->
      <!-- <input class="clickbtn" type="button" @click="getdatatest()" value="点击"> -->
    </div>
    <router-view></router-view>
    <router-view name="ccarousel"></router-view>
    <router-view name="recommend"></router-view>
    <!-- <router-view name="searchBox"></router-view> -->
    <!-- 所有主页分区 -->
    <!-- <div class="all_partition"> -->
      <router-view :partitionName="partitionNameJava" name="partitionJava" class="partitionJava"></router-view>
          <!-- <br/> -->
      <router-view :partitionName="partitionNameC" name="partitionC" class="partitionC"></router-view>
          <!-- <br/> -->
      <router-view :partitionName="partitionNamePython" name="partitionPython" class="partitionPython"></router-view>
          <!-- <br/> -->
      <router-view :partitionName="partitionNameSpring" name="partitionSpring" class="partitionSpring"></router-view>
          <!-- <br/> -->
      <router-view :partitionName="partitionNameAndroid" name="partitionAndroid" class="partitionAndroid"></router-view>
          <!-- <br/> -->
    <!-- </div> -->
    <!-- <router-view name="login"></router-view> -->
    <!-- <router-view name="selfCenter"></router-view> -->
    <router-view name="FileUpload"></router-view>
    <router-view name="columnContribution"></router-view>
    <router-view name="readColumn"></router-view>
    <router-view name="hello"></router-view>
    <router-view name="videoview"></router-view>
    <router-view name="adminViewLogin"></router-view>
    <router-view name="searchResult"></router-view>
  </div>
</template>

<script>
/*引入组件中的导航栏 */
import Nav from './components/Nav.vue';
import SearchBox from './components/SearchBox.vue';
import Partition from './components/Partition.vue';
import LoginTest from './components/LoginTest.vue';
import Video from './components/VideoView.vue';
import AdminLogin from './components/AdminView/AdminLogin.vue';
import axios from 'axios';

export default {
  data () {
    return {
     name:'当前滑过的导航li标签',
     li_name:'这个是当前滑过的',
    //  向Partition这个组件传递分区名字
     partitionNameJava:'Java',
     partitionNameC:'C',
     partitionNamePython:'Python',
     partitionNameSpring:'Spring',
     partitionNameAndroid:'Android',
     videoSrc:'',
     url:'',
    }
  },
  mounted(){
    this.getVideoUrl()
  },
  components:{
    'v-nav':Nav,
    'v-searchBox':SearchBox,
    'v-partition':Partition,
  },

  methods:{
    getVideoUrl(data){
      console.log(data)
      this.videoSrc=data
      console.log(this.videoUrl)
    },
    }
  }
</script>

<style>
body{
  margin: 0;
  padding: 0;
}
#app {
    margin: 0;
    padding: 0;
    align-items: center;

    /* 设置了以下注释的属性后会导致页面无法滚动 */
    /* position: fixed; */
    width: 100%;
    height: 100%;
}
#head{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
 .nav{
    margin: 0;
    padding: 0;
    position: relative;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #fff;
}
.dh ul{
    margin: 0;
    padding: 0;
    display: flex;
}
.dh ul li{
    list-style: none;
    margin: 0 20px;
    transition: 0.2s;
}
.dh ul li a{
    display: block;
    position: relative;
    text-decoration: none;
    padding: 5px;
    font-size: 18px;
    font-family: sans-serif;
    color: rgb(66, 64, 64);
    transition: 0.2s;
}
.dh ul:hover li a{
    transform: scale(1.5);
    opacity: .2;
    filter: blur(5px);
}
.dh ul li a:hover{
    transform: scale(1.5);
    opacity: 1;
    filter: blur(0);
}
.dh ul li a:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff497c;
    transition: 0.2s;
    transform-origin: right;
    transform: scaleX(0);
    z-index: -1;
}
.dh ul li a:hover:before{
    transition: transfrom 0.2s;
    transform-origin: left;
    transform: scaleX(1);
}
.partitionJava i{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('~@/../static/images/cource_java.jpg');
    background-position: center center;
    background-size: 80px 80px;
}
.partitionC i{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('~@/../static/images/cource_c.jpg');
    background-position: center center;
    background-size: 80px 80px;
}
.partitionPython i{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('~@/../static/images/cource_python.jpg');
    background-position: center center;
    background-size: 80px 80px;
}
.partitionSpring i{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('~@/../static/images/cource_spring.jpg');
    background-position: center center;
    background-size: 80px 80px;
}
.partitionAndroid i{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('~@/../static/images/cource_android2.jpg');
    background-position: center center;
    background-size: 80px 80px;
}
</style>
